<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10-显示过滤或者排序后的结果</title>
</head>
<body>
  <div id="app1"> 
    <ol>
      <li
        v-for='n in evenNumbers'
      >
       {{ n }}
      </li>
    </ol>
  </div>

  <div id="app2">
     <ul
       v-for='set of sets'
     >
       <li
         v-for='n in even(set)'
       >
         {{ n }}
       </li>
     </ul>
  </div>

  <!-- 在v-for中使用值范围 -->
  <div id="app3">
    <span 
    v-for='n in 10'
    v-text='n'
    >
    </span>
  </div>

  <!-- v-for 和v-if同时使用 -->
  <!-- 若想跳过循环可以将v-if写在v-for的上一级 -->
  <div id="app4">
     <ol>
       <li
        v-for='todo in todos'
        v-if='!todo.isComplete'
       >
        {{ todo }}
       </li>
     </ol>
  </div>


  <div id="todo-list-example">
    <form v-on:submit.prevent="addNewTodo">
      <label for="new-todo">Add a todo</label>
      <input
        v-model="newTodoText"
        id="new-todo"
        placeholder="E.g. Feed the cat"
      >
      <button>Add</button>
    </form>
    <ul>
      <li
        is="todo-item"
        v-for="(todo, index) in todos"
        v-bind:key="todo.id"
        v-bind:title="todo.title"
        v-on:remove="todos.splice(index, 1)"
      ></li>
    </ul>
  </div>
</body>
<style>
  *{
    list-style: none;
  }
</style>
<script src="./vue1111.js"></script>
<script>
  var App1 = new Vue({
    el:'#app1',
    data:{
      numbers:[1,2,3,4,5]
    },
    computed:{
      evenNumbers(){
        return this.numbers.filter(function(number){
          return number %2 === 0
        })
      }
    }
  });

  var Appp2 = new Vue({
    el:'#app2',
    data:{
      sets:[[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
    },
    methods:{
      even(numbers){
        return numbers.filter(function(number){
          return number %2 === 0           
        })
      }
    }
  });

  var App3 = new Vue({
    el:'#app3',
    data:{
      10:true
    }
  });
  var App4 = new Vue({
    el:'#app4',
    data:{
      todos:{
        title:'hhhhhhh',
        content:'songqizong'
      }
    }
  });

  Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})
</script>
</html>